import {defineStore} from "pinia";
import {ref, reactive, computed} from 'vue';
import {getStorage, setStorage, delStorage} from "@/tools/storage.js";
import config from "@/config/book.config.js";

export const useAppStore = defineStore({
    id: "app",
    state: () => ({
        /**
         * 布局方式（整体界面的排版方式）
         * layout-side -- 侧边布局
         * layout-head -- 顶部菜单
         * layout-comp -- 联动布局
         * */
        layout: getStorage('layout') || config.layout,

        /**
         * 系统主题（整体色调）
         * light -- 白色主题
         * dark -- 暗色主题
         * night -- 夜间主题
         */
        theme: getStorage('theme') || config.theme,

        /**
         * 主题颜色(主题颜色)
         */
        color: getStorage('color') || config.color,

        /**
         * 侧边状态
         * true  --  隐藏
         * false --  展开
         * */
        collapsed: getStorage('collapsed') || config.collapsed,

        /**
         * 菜单头部
         * true  --  隐藏
         * false --  展开
         * */
        logo: getStorage('logo') || config.logo,

        /**
         * 是否开启多标签页
         * true  --  隐藏
         * false --  展开
         * */
        tab: getStorage('tab') || config.tab,

        /**
         * 保持状态
         * true -- 是
         * false -- 否
         */
        keepAlive: getStorage('keepAlive') || config.keepAlive,

        /**
         * 多标签页样式
         * pear-card-tab
         * pear-dot-tab
         */
        tabType: getStorage('tabType') || config.tabType,

        /**
         * 侧边菜单栏宽度
         * 单位:px
         * */
        sideWitch: config.sideWidth == null ? 240 : config.sideWidth,

        /**
         * 侧边菜单栏宽度(折叠)
         * 单位:px
         * */
        collapsedWidth: config.collapsedWidth == null ? 60 : config.collapsedWidth,

        /**
         * 固定头部
         * true
         * false
         */
        fixedHeader: getStorage('fixedHeader') || config.fixedHeader,

        /**
         * 固定侧边
         * true
         * false
         */
        fixedSide: getStorage('fixedSide') || config.fixedSide,

        /**
         * 路由动画
         * fadeRight
         * fadeTop
         */
        routerAnimate: getStorage('routerAnimate') || config.routerAnimate,

        /**
         * 配色列表
         * key
         * color
         * scopeName
         */
        colorList: config.colorList,

        /**
         * 主题面板状态
         * true
         * false
         */
        setting: {opened: false},

        /**
         * 菜单手风琴
         * true
         * false
         */
        muiOpen: true,

        /**
         * 国际化配置
         * zh-CN 中文
         * en-US 英文
         */
        language: getStorage('language') || config.defaultLanguage,

        /**
         * 路由刷新辅助变量
         * true
         * false
         */
        routerActive: true,

        /**
         * 路由列表
         */
        routes: [],

        /**
         * 移动端配置
         * true
         * false
         */
        isMobile: false,

        /**
         * 请求辅助变量
         * true
         * false
         */
        cancelToken: [],
    }),
    getters: {},
    actions: {
        update_layout(state) {
            this.layout = state;
        },
        update_theme(state) {
            this.theme = state;
        },
        update_router_active(state) {
            this.routerActive = !state;
        },
        update_color(state) {
            this.color = state;
        },
        update_tab_type(state) {
            this.tabType = state;
        },
        update_router_animate(state) {
            this.routerAnimate = state;
        },
        toggle_sidebar(state) {
            this.sideWitch = !state;
        },
        toggle_setting() {
            this.setting.opened = !this.setting.opened;
        },
        toggle_logo() {
            this.logo = !this.logo;
        },
        toggle_tab() {
            this.tab = !this.tab;
        },
        toggle_keep_alive() {
            this.keepAlive = !this.keepAlive;
        },
        toggle_fixedSide() {
            this.fixedSide = !this.fixedSide;
        },
        toggle_fixedHeader() {
            this.fixedHeader = !this.fixedHeader;
        }
    },
    persist: true,
});